import React from 'react';
import ReactEcharts from '@/components/Echarts';
import { Empty } from 'antd';

const initOptions = (data, legendData = []) => {
    const yAxisData = [];
    // 这个是将真正要的数据内容赋值给临时数组，以便后面循环得到数据
    const tempArr = data.map(item => {
        yAxisData.push(item.departmentName);
        return item.hrEmployeeCharacterAnalysisVO;
    });

    // 通过图例先生成要显示的数据格式
    const seriesData = legendData.map(item => ({
        name: item,
        type: 'bar',
        stack: '总量',
        barMaxWidth: '60%',
        data: []
    }));

    // 循环临时数据和图例数组匹配，将同一类型的数据push到数组里面
    tempArr.forEach(item => {
        // 循环图例
        seriesData.forEach(sItem => {
            let isHit = false; // 为了判断当前部门有没有这个图例下的数据，没有要push一个null进去
            item.forEach(subItem => {
                // 当前部门有图例的数据push进去
                if (subItem.characterValue === sItem.name) {
                    isHit = true;
                    sItem.data.push(subItem.workNum);
                }
            });
            // 当前部门没有数据
            if (!isHit) {
                sItem.data.push(null);
            }
        });
    });

    return {
        color: ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', 'rgba(255, 168, 8, 0.85)'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            bottom: 0,
            data: legendData
        },
        dataZoom: [
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                start: 0,
                end: 80,
                width: 10,
                handleIcon:
                    'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                showDetail: false,
                showDataShadow: false
            }
        ],
        grid: {
            top: 30,
            left: 90,
            right: 90,
            bottom: 70
        },
        xAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisLabel: {
                color: 'rgba(0, 0, 0, 0.45)'
            },
            splitLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
            axisTick: { show: false }
        },
        yAxis: {
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { rotate: 45 },
            type: 'category',
            data: yAxisData
        },
        series: seriesData
    };
};

// 员工特征分析
// 接口返回的数据格式太乱了，反正我不知道我是这么处理过来的。。。
const EmployeeFeatureBar = ({ data = [], featuresType }) => {
    let featureData = [];
    let legendData = [];
    if (data.length > 0 && featuresType) {
        // 类型map
        const featuresMap = {};
        data.forEach(item => {
            featuresMap[item.id] = item.analysisList;
            if (featuresType === item.id) {
                legendData = item.characterValueList;
            }
        });
        featureData = featuresMap[featuresType];
    }
    return (
        <>
            {data.length > 0 && featuresType && legendData && featureData ? (
                <div style={{ height: '100%' }}>
                    <ReactEcharts style={{ height: '100%' }} option={initOptions(featureData, legendData)} />
                </div>
            ) : (
                <div
                    style={{
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >
                    <Empty />
                </div>
            )}
        </>
    );
};

export default EmployeeFeatureBar;
